<template>
  <!-- 储充告警记录 -->
  <div class="filterContent">
    <a-form :model="filterForm" layout="inline">
      <a-form-item label="电站名称">
        <a-select
          v-model:value="filterForm.stationId"
          class="formInput"
          placeholder="请选择"
          allow-clear
          show-search
          optionFilterProp="label"
          :disabled="stationInfo?.id"
        >
          <a-select-option
            v-for="item in stationtList"
            :value="item.stationId"
            :key="item.stationId"
            :label="item.stationName"
          >
            {{ item.stationName }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="电池堆名称">
        <a-select
          ref="select"
          v-model:value="filterForm.linkId"
          class="formInput"
          allow-clear
          placeholder="请选择"
          @change="changeLink"
        >
          <a-select-option
            v-for="item in energyLinkList"
            :value="item.deviceId"
            :key="item.deviceId"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="电池簇名称">
        <a-select
          ref="select"
          v-model:value="filterForm.blockId"
          class="formInput"
          allow-clear
          placeholder="请选择"
          @change="changeBlock"
        >
          <a-select-option
            v-for="item in blockList"
            :value="item.deviceId"
            :key="item.deviceId"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="告警状态">
        <a-select
          ref="select"
          v-model:value="filterForm.evtStatus"
          class="formSelect"
          placeholder="请选择"
          allow-clear
          style="width: 120px"
        >
          <a-select-option
            v-for="item in WARN_CONFIRM_STATUS"
            :key="item.value"
            :value="item.value"
          >
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-button type="primary" class="filterBtn" @click="handleFilter"
        >查询</a-button
      >
    </a-form>
  </div>
  <div class="tableContent" ref="tableContainerRef">
    <a-table
      :dataSource="tableData"
      :columns="columns"
      size="small"
      :scroll="tableScroll"
      @resizeColumn="handleResizeColumn"
      :pagination="false"
      :loading="tableLoading"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'evtType'">
          {{
            EVT_TYPE.filter((item) => item.value === record.evtType)[0]?.label
          }}
        </template>
        <template v-if="column.key === 'evtStatus'">
          {{ record.evtStatus ? "已确认" : "未确认" }}
        </template>

        <template v-if="column.key === 'handle'">
          <a-button type="link" @click="handleConfirmWarn(record)"
            >确认告警</a-button
          >
        </template>
      </template>
    </a-table>
    <a-pagination
      v-model:current="filterForm.current"
      v-model:page-size="filterForm.size"
      :total="total"
      position="bottomRight"
      show-size-changer
      @change="getStorageChargingList"
      :show-total="(total) => `总共 ${total} 条`"
    >
      <template #buildOptionText="props">
        <span>{{ props.value }}条/页</span>
      </template>
    </a-pagination>
  </div>

  <ConfirmWarn
    :rowData="rowData"
    :confirmWarnVisible="confirmWarnVisible"
    @update:confirmWarnVisible="(val) => (confirmWarnVisible = val)"
    @getStorageChargingList="getStorageChargingList"
  />
</template>
<script setup>
import useTableScroll from "@/hooks/useTableScroll"
import { WARN_CONFIRM_STATUS } from "@/constants/stationConfig.js"
import ConfirmWarn from "./confirmWarn.vue"
import { EVT_TYPE } from "@/constants/stationConfig.js"

const $api = inject("$api")
const filterForm = ref({
  stationId: undefined,
  linkId: undefined,
  blockId: undefined,
  evtStatus: undefined,
  size: 10,
  current: 1,
})
const total = ref()
const tableData = ref([
  {
    id: 1,
    evtType: 1,
    evtStatus: 1,
  },
])
const rowData = ref({})
const confirmWarnVisible = ref(false)
const tableLoading = ref(false)
const columns = ref([
  {
    title: "电站",
    dataIndex: "stationName",
    key: "stationName",
    width: 200,
    resizable: true,
    align: "center",
  },
  {
    title: "电池堆",
    dataIndex: "linkName",
    key: "linkName",
    width: 200,
    resizable: true,
    align: "center",
  },
  {
    title: "电池簇",
    dataIndex: "blockName",
    key: "blockName",
    width: 150,
    resizable: true,
    align: "center",
  },
  {
    title: "告警类别",
    dataIndex: "evtType",
    key: "evtType",
    width: 120,
    resizable: true,
    align: "center",
  },
  {
    title: "告警信息",
    dataIndex: "noRuleWarnMessage",
    key: "noRuleWarnMessage",
    width: 180,
    resizable: true,
    align: "center",
  },
  {
    title: "告警状态",
    dataIndex: "evtStatus",
    key: "evtStatus",
    width: 160,
    resizable: true,
    align: "center",
  },
  {
    title: "告警开始时间",
    dataIndex: "startTime",
    key: "startTime",
    width: 120,
    resizable: true,
    align: "center",
  },
  {
    title: "告警结束时间",
    dataIndex: "endTime",
    key: "endTime",
    width: 180,
    resizable: true,
    align: "center",
  },
  {
    title: "告警持续时间",
    dataIndex: "updateTime",
    key: "updateTime",
    width: 180,
    resizable: true,
    align: "center",
  },
  {
    title: "告警确认时间",
    dataIndex: "confirmTime",
    key: "confirmTime",
    width: 180,
    resizable: true,
    align: "center",
  },
  {
    title: "确认内容",
    dataIndex: "confirmContent",
    key: "confirmContent",
    width: 180,
    resizable: true,
    align: "center",
  },
  {
    title: "操作",
    dataIndex: "handle",
    key: "handle",
    //width: 120,
    align: "center",
    fixed: "right",
  },
])
function handleResizeColumn(w, col) {
  col.width = w
}
const stationtList = ref([])
const getCompanyStationtList = async () => {
  const res = await $api.companyStationtList()
  if (res?.code === 0) {
    stationtList.value = res.data.filter((item) => item.isChargeProject === 1)
  }
}
const getStorageChargingList = async () => {
  tableLoading.value = true
  const params = {
    ...filterForm.value,
  }
  const res = await $api.chargeEvtList(params)
  tableLoading.value = false
  if (res && res.code === 0) {
    tableData.value = res.data.records
    total.value = res.data.total
  }
}
const tableContainerRef = ref(null)
const handleFilter = () => {
  filterForm.value.current = 1
  filterForm.value.size = 10
  getStorageChargingList()
}
const handleConfirmWarn = (record) => {
  rowData.value = record
  confirmWarnVisible.value = true
}
onMounted(async () => {
  getStorageChargingList()
  getCompanyStationtList()
})

const { tableScroll } = useTableScroll(tableData, tableContainerRef)
</script>

<style lang="less" scoped>
.ant-table {
  .ant-btn {
    padding: 4px 5px;
  }
}
.formInput {
  width: 155px;
}
.filterBtn {
  margin: 0 20px 20px 0;
  &:last-child {
    margin-right: 0;
  }
}
.tableContent {
  border-radius: 4px;
  background-color: #141414;
  padding: 8px;
}
// ::v-deep(.ant-table-scroll-horizontal) {
//   height: calc(100vh - 270px);
//   overflow: auto scroll;
// }
</style>
